<template>
  <div
    id="GAPForms"
  >
    <el-card class="box-card">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="事业部维度" name="first">
            <el-row>
                <el-col :xs="24" :sm="24" :lg="24">
                    <div id="reportrange" class="form-control">
                    <div>
                        <el-row>
                            <el-col :xs="24" :sm="24" :lg="24">
                                <div class="item">
                                    <label for="select">事业部:</label>
                                    <el-select
                                    v-model="dept"
                                    multiple
                                    :show-all-levels="false"
                                    @change="deptSearch"
                                    :props="props"
                                    placeholder="请选择"
                                    collapse-tags
                                    clearable
                                    filterable
                                    style="margin-left: 10px; width:17%">
                                        <el-option
                                            v-for="item in deptOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            :disabled="item.disabled"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -24px;margin-left:30%">
                                <label for="select" style="margin-right: 20px">主技术/产品中心:</label>
                                <el-select
                                v-model="Produnction"
                                multiple
                                @change="tecSearch($event,'主技术中心/主产品中心')"
                                placeholder="请选择"
                                collapse-tags
                                clearable
                                filterable
                                style="width: 150px;margin-top: -70px;margin-right: 34%;">
                                    <el-option
                                        v-for="item in ProdunctionOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        :disabled="item.disabled"
                                    >
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -24px;margin-left:  62%">
                                <label for="select" style="margin-right: 20px">项目状态:</label>
                                <el-select
                                v-model="proStatus1"
                                multiple
                                @change="proStatusSearch"
                                placeholder="请选择"
                                collapse-tags
                                clearable
                                filterable
                                style="width: 150px;margin-top: -70px;margin-right: 34%;">
                                <el-option
                                    v-for="item in ProStatusOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled"
                                >
                                </el-option>
                                </el-select>
                            </el-col>
                        
                        </el-row>
                        <el-row >
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: 25px">
                            <label for="select" style="margin-right: 20px">资源分类:</label>
                            <el-select
                            v-model="recourse"
                            @change="recourseSearch"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable  
                            style="width: 150px;margin-top: -70px;margin-right: 34%;width:12%">
                            <el-option
                                v-for="item in recourseOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -25px;margin-left: 30%;">
                            <label for="select" style="margin-right: 20px">客户:</label>
                            <el-select
                            v-model="cusDept"
                            multiple
                            @change="cusDeptSearch"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable
                            style="width: 350px;margin-top: -70px;margin-right: 34%;">
                            <el-option
                                v-for="item in cusDeptOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: 28px">
                            <label for="select" style="margin-right: 20px">技术领域:</label>
                            <el-cascader
                            style="width: 150px;"
                            placeholder="请选择"
                            :options="tecAreaOptions"
                            :props="props"
                            @change="tecAreaSearch"
                            collapse-tags
                            clearable
                            filterable
                            ref="tree"></el-cascader>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top:-35px">
                            <label for="select" style="margin-right: 20px;margin-left: 30%">时间段:</label>
                            <el-date-picker
                            v-model="value2"
                            type="monthrange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="changeDateRange">
                            </el-date-picker>
                        </el-col>
                        </el-row>
                    </div>
                    </div>
                </el-col>
                <el-button type="primary" plain round style="float: right; margin: 10px 0 10px 0;" @click="down()">导出</el-button>
            </el-row>
            <el-card class="box-card">
                <el-table 
                :data="tableData"
                border 
                max-height="700"  
                v-loading="loading" 
                element-loading-text="拼命加载中" 
                element-loading-spinner="el-icon-loading" 
                show-summary 
                :summary-method="getSummaries"
                :header-cell-style="{ background: '#eef1f6',height:'80px' }"
                >
                
                    <el-table-column prop="dept_name" label="立项事业部" min-width="180" align="center" fixed="left">
                    </el-table-column>
                    <el-table-column label="资源分类" min-width="150" align="center" fixed="left">
                    <template slot-scope="scope"> 
                        <div v-if="tab==='0'">
                        <div class="borders" v-if="scope.row.type[0].label==='need'"  >{{ "需求" }}</div>
                        <div class="borders1" v-if="scope.row.type[1].label==='get'" >{{ "供给" }}</div>
                        <div class="borders2" v-if="scope.row.type[2].label==='gap'" >{{ "GAP"  }}</div>
                        </div>

                        <div v-else>
                        <div v-show="tab==='1'">
                            <div v-if="scope.row.type[0].label==='need'">{{ "需求" }}</div>
                        </div>

                        <div v-show="tab==='2'">
                            <div v-if="scope.row.type[1].label==='get'">{{ "供给" }}</div>
                        </div>

                        <div v-show="tab==='3'">
                            <div v-if="scope.row.type[2].label==='gap'">{{ "GAP" }}</div>
                        </div>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column label="汇总" min-width="150"  align="center" type="cell">
                    <template slot-scope="scope">
                        <div v-if="tab==='0'">
                        <div class="borders">{{ scope.row.type[0].sum_value.toFixed(1) }}</div>
                    
                        <!-- <div class="borders1" >{{ scope.row.type[1].sum_value.toFixed(1) }}</div> -->
                        <div class="borders1">{{ scope.row.type[1].sum_value.toFixed(1) }}</div>
                    
                        <!-- <div class="borders2" >{{ scope.row.type[2].sum_value.toFixed(1) }}</div> -->
                        <div class="borders2">{{ scope.row.type[2].sum_value.toFixed(1) }}</div>
                        </div>
                        <div v-else>
                        <div v-show="tab==='1'">
                            <!-- <div>{{ scope.row.type[0].sum_value.toFixed(1) }}</div> -->
                            <div>{{ scope.row.type[0].sum_value.toFixed(1) }}</div>
                        </div>

                        <div v-show="tab==='2'">
                            <!-- <div >{{ scope.row.type[1].sum_value.toFixed(1) }}</div> -->
                            <div>{{ scope.row.type[1].sum_value.toFixed(1) }}</div>
                        </div>

                        <div v-show="tab==='3'">
                            <!-- <div >{{ scope.row.type[2].sum_value.toFixed(1) }}</div> -->
                            <div>{{ scope.row.type[2].sum_value.toFixed(1) }}</div>
                        </div>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column :prop="v" v-for="(v,i) in monthRange" min-width="150"  :label="v+'月'"  align="center" :key="i" type="cell">
                    <template slot-scope="scope">
                        <div v-if="tab==='0'">
                        <!-- <div class="borders">{{ scope.row.type[0].value[v].toFixed(1) }}</div> -->
                        <div class="borders">{{ scope.row.type[0].value[v].toFixed(1)}}</div>
                    
                        <!-- <div class="borders1" >{{ scope.row.type[1].value[v].toFixed(1) }}</div> -->
                        <div class="borders1">{{ scope.row.type[1].value[v].toFixed(1)}}</div>
                        
                        <!-- <div class="borders2" >{{ scope.row.type[2].value[v].toFixed(1) }}</div> -->
                        <div class="borders2">{{ scope.row.type[2].value[v].toFixed(1)}}</div>
                        </div>

                        <div v-else>
                        <div v-show="tab==='1'">
                            <!-- <div>{{ scope.row.type[0].value[v].toFixed(1) }}</div> -->
                            <div>{{ scope.row.type[0].value[v].toFixed(1)}}</div>
                        </div>

                        <div v-show="tab==='2'">
                        <!-- <div >{{ scope.row.type[1].value[v].toFixed(1) }}</div> -->
                        <div>{{ scope.row.type[1].value[v].toFixed(1)}}</div>
                        </div>

                        <div v-show="tab==='3'">
                            <!-- <div >{{ scope.row.type[2].sum_value.toFixed(1) }}</div> -->
                            <div>{{ scope.row.type[2].sum_value.toFixed(1) }}</div>
                        </div>
                        </div>
                    </template>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination
                    class="marT"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-size="baseSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    style="margin-top:10px;margin-left:34%"
                    >
                </el-pagination> -->
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="客户维度" name="second">
              <el-row>
                <el-col :xs="24" :sm="24" :lg="24">
                    <div id="reportrange" class="form-control">
                    <div>
                        <el-row>
                            <el-col :xs="24" :sm="24" :lg="24">
                                <div class="item">
                                    <label for="select">事业部:</label>
                                    <el-select
                                    v-model="dept1"
                                    multiple
                                    :show-all-levels="false"
                                    @change="deptSearch"
                                    :props="props"
                                    placeholder="请选择"
                                    collapse-tags
                                    clearable
                                    filterable
                                    style="margin-left: 10px; width:17%">
                                        <el-option
                                            v-for="item in deptOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            :disabled="item.disabled"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -24px;margin-left: 30%">
                                <label for="select" style="margin-right: 20px">主技术/产品中心:</label>
                                <el-select
                                v-model="Produnction"
                                multiple
                                @change="tecSearch($event,'主技术中心/主产品中心')"
                                placeholder="请选择"
                                collapse-tags
                                clearable
                                filterable
                                style="width: 150px;margin-top: -70px;margin-right: 34%;">
                                    <el-option
                                        v-for="item in ProdunctionOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        :disabled="item.disabled"
                                    >
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -24px;margin-left: 62%">
                                <label for="select" style="margin-right: 20px">项目状态:</label>
                                <el-select
                                v-model="proStatus"
                                multiple
                                @change="proStatusSearch"
                                placeholder="请选择"
                                collapse-tags
                                clearable
                                filterable
                                style="width: 150px;margin-top: -70px;margin-right: 34%;">
                                <el-option
                                    v-for="item in ProStatusOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled"
                                >
                                </el-option>
                                </el-select>
                            </el-col>
                        
                        </el-row>
                        <el-row >
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: 25px">
                            <label for="select" style="margin-right: 20px">资源分类:</label>
                            <el-select
                            v-model="recourse1"
                            @change="recourseSearch"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable  
                            style="width: 150px;margin-top: -70px;margin-right: 34%;width:12%">
                            <el-option
                                v-for="item in recourseOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -25px;margin-left: 30%;">
                            <label for="select" style="margin-right: 20px">客户:</label>
                            <el-select
                            v-model="cusDept1"
                            multiple
                            @change="cusDeptSearch"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable
                            style="width: 350px;margin-top: -70px;margin-right: 34%;">
                            <el-option
                                v-for="item in cusDeptOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: 28px">
                            <label for="select" style="margin-right: 20px">技术领域:</label>
                            <el-cascader
                            style="width: 150px;"
                            placeholder="请选择"
                            :options="tecAreaOptions"
                            :props="props"
                            @change="tecAreaSearch"
                            collapse-tags
                            clearable
                            filterable
                            ref="tree1"></el-cascader>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top:-35px">
                            <label for="select" style="margin-right: 20px;margin-left: 30%">时间段:</label>
                            <el-date-picker
                            v-model="value1"
                            type="monthrange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="changeDateRange">
                            </el-date-picker>
                        </el-col>
                        </el-row>
                    </div>
                    </div>
                </el-col>
                <el-button type="primary" plain round style="float: right; margin: 10px 0 10px 0;" @click="down1()">导出</el-button>
            </el-row>
            <el-table 
                :data="tableData1"
                border 
                max-height="700"  
                v-loading="loading1" 
                element-loading-text="拼命加载中" 
                element-loading-spinner="el-icon-loading" 
                show-summary 
                :summary-method="getSummaries1"
                :header-cell-style="{ background: '#eef1f6',height:'80px' }"
                >
                    <el-table-column prop="kh_zh" label="客户" min-width="180" align="center" fixed="left">
                    </el-table-column>
                    <el-table-column label="资源分类" min-width="150" align="center">
                        <template slot-scope="scope"> 
                            <div v-if="tab1==='0'">
                            <div class="borders" v-if="scope.row.type[0].label==='need'"  >{{ "需求" }}</div>
                            <div class="borders1" v-if="scope.row.type[1].label==='get'" >{{ "供给" }}</div>
                            <div class="borders2" v-if="scope.row.type[2].label==='gap'" >{{ "GAP"  }}</div>
                            </div>

                            <div v-else>
                            <div v-show="tab1==='1'">
                                <div v-if="scope.row.type[0].label==='need'">{{ "需求" }}</div>
                            </div>

                            <div v-show="tab1==='2'">
                                <div v-if="scope.row.type[1].label==='get'">{{ "供给" }}</div>
                            </div>

                            <div v-show="tab1==='3'">
                                <div v-if="scope.row.type[2].label==='gap'">{{ "GAP" }}</div>
                            </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="汇总" min-width="150" align="center" type="cell">
                    <template slot-scope="scope">
                        <div v-if="tab1==='0'">
                        <div class="borders">{{ scope.row.type[0].sum_value.toFixed(1) }}</div>
                        <div class="borders1">{{ scope.row.type[1].sum_value.toFixed(1) }}</div>
                        <div class="borders2">{{ scope.row.type[2].sum_value.toFixed(1) }}</div>
                        </div>
                        <div v-else>
                        <div v-show="tab1==='1'">
                            <div>{{ scope.row.type[0].sum_value.toFixed(1) }}</div>
                        </div>

                        <div v-show="tab1==='2'">
                            <div>{{ scope.row.type[1].sum_value.toFixed(1) }}</div>
                        </div>

                        <div v-show="tab1==='3'">
                            <div>{{ scope.row.type[2].sum_value.toFixed(1) }}</div>
                        </div>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column :prop="v" v-for="(v,i) in monthRange1"  :label="v+'月'" min-width="150" align="center" :key="i" type="cell">
                    <template slot-scope="scope">
                        <div v-if="tab1==='0'">
                        <div class="borders">{{ scope.row.type[0].value[v].toFixed(1) }}</div>
                        <div class="borders1">{{ scope.row.type[1].value[v].toFixed(1) }}</div>
                        <div class="borders2">{{ scope.row.type[2].value[v].toFixed(1) }}</div>
                        </div>

                        <div v-else>
                        <div v-show="tab1==='1'">
                            <div>{{ scope.row.type[0].value[v].toFixed(1) }}</div>
                        </div>

                        <div v-show="tab1==='2'">
                        <div>{{ scope.row.type[1].value[v].toFixed(1) }}</div>
                        </div>

                        <div v-show="tab1==='3'">
                            <div>{{ scope.row.type[2].sum_value.toFixed(1) }}</div>
                        </div>
                        </div>
                    </template>
                    </el-table-column>
            </el-table>
            <!-- <el-pagination
                class="marT"
                background
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="current1"
                :page-size="baseSize1"
                layout="total, prev, pager, next, jumper"
                :total="total1"
                style="margin-top:10px;margin-left:34%"
                >
            </el-pagination> -->
          </el-tab-pane>
          <el-tab-pane label="项目维度" name="third">
            <el-row>
                <el-col :xs="24" :sm="24" :lg="24">
                    <div id="reportrange" class="form-control">
                    <div class="block">
                        <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24">
                            <div class="item">
                            <label for="cascader">事业部:</label>
                            <el-cascader
                                clearable
                                placeholder="请选择"
                                :options="deptOptions3"
                                filterable
                                :show-all-levels="false"
                                :collapse-tags="true"
                                v-model="dept3"
                                @change="deptSearch3"
                                :props="props"
                                style="margin-left: 10px; width:12%"
                                id="cascader"
                                >
                            </el-cascader>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -24px;margin-left: 60%">
                            <label for="select" style="margin-right: 20px">主技术/产品中心:</label>
                            <el-select
                            v-model="Produnction3"
                            multiple
                            @change="tecSearch"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable
                            style="width: 150px;margin-top: -70px;margin-right: 34%;">
                            <el-option
                                v-for="item in ProdunctionOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                            </el-select>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -24px;margin-left: 30%">
                            <label for="select" style="margin-right: 20px">项目状态:</label>
                            <el-select
                            v-model="proStatus3"
                            multiple
                            @change="proStatusSearch3"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable
                            style="width: 150px;margin-top: -70px;margin-right: 34%;">
                            <el-option
                                v-for="item in ProStatusOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                        </el-col>
                        
                        </el-row>
                        <el-row >
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: 25px">
                            <label for="select" style="margin-right: 20px">资源分类:</label>
                            <el-select
                            v-model="recourse3"
                            @change="recourseSearch3"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable  
                            style="width: 150px;margin-top: -70px;margin-right: 34%;width:12%">
                            <el-option
                                v-for="item in recourseOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -25px;margin-left: 30%;">
                            <label for="select" style="margin-right: 20px">客户:</label>
                            <el-select
                            v-model="cusDept3"
                            multiple
                            @change="cusDeptSearch3"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable
                            style="width: 250px;margin-top: -70px;margin-right: 34%;">
                            <el-option
                                v-for="item in cusDeptOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                            
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -25px;margin-left: 60%;">
                        <label for="select" style="margin-right: 20px">实施部门:</label>
                            <el-select
                            v-model="ssbm"
                            multiple
                            @change="searchSsbm"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable
                            style="width: 250px;margin-top: -70px;margin-right: 34%;">
                            <el-option
                                v-for="item in SsbmOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                          </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: 28px">
                            <label for="select" style="margin-right: 20px">技术领域:</label>
                            <el-cascader
                            style="width: 150px;"
                            placeholder="请选择"
                            :options="tecAreaOptions"
                            :props="props"
                            @change="tecAreaSearch3"
                            collapse-tags
                            clearable
                            filterable
                            ref="tree2"></el-cascader>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top:-35px">
                            <label for="select" style="margin-right: 20px;margin-left: 30%">时间段:</label>
                            <el-date-picker
                            v-model="value3"
                            type="monthrange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="changeDateRange3">
                            </el-date-picker>
                        </el-col>
                        </el-row>
                    </div>
                    </div>
                </el-col>
                <el-button type="primary" plain round style="float: right; margin: 10px 0 10px 0;" @click="down3()">导出</el-button>
            </el-row>
            <el-card class="box-card">
            <el-table 
            :data="tableData3"
            border 
            max-height="700"  
            v-loading="loading3" 
            element-loading-text="拼命加载中" 
            element-loading-spinner="el-icon-loading" 
            show-summary 
            :summary-method="getSummaries3"
            >
                <el-table-column prop="project_name" label="项目" min-width="100" align="center" fixed="left">
                </el-table-column>
                <el-table-column prop="dept" label="立项事业部" min-width="100" align="center" fixed="left">
                </el-table-column>
                <el-table-column prop="core" label="主技术/产品中心" min-width="100" align="center" fixed="left">
                </el-table-column>
                <el-table-column prop="project_manager" label="PM" min-width="70" align="center" fixed="left">
                </el-table-column>
                <el-table-column prop="status" label="项目状态" min-width="90" align="center" fixed="left">
                </el-table-column>
                 <el-table-column prop="kh_zh" label="客户简称" min-width="90" align="center" fixed="left">
                </el-table-column>
                <el-table-column  label="实施部门" min-width="180" align="center" fixed="left">
                  <template slot-scope="scope">
                    <div v-for="(v,i) in scope.row.site_power_dept_name" :key="i">
                       {{v}}
                    </div>
                   
                  </template> 
                </el-table-column>
                <el-table-column label="资源分类" min-width="130" align="center" fixed="left">
                <template slot-scope="scope"> 
                    <div v-if="tab3==='0'">
                    <div class="borders" v-if="scope.row.type[0].label==='need'"  >{{ "需求" }}</div>
                    <div class="borders1" v-if="scope.row.type[1].label==='get'" >{{ "供给" }}</div>
                    <div class="borders2" v-if="scope.row.type[2].label==='gap'" >{{ "GAP"  }}</div>
                    </div>

                    <div v-else>
                    <div v-show="tab3==='1'">
                        <div v-if="scope.row.type[0].label==='need'">{{ "需求" }}</div>
                    </div>

                    <div v-show="tab3==='2'">
                        <div v-if="scope.row.type[1].label==='get'">{{ "供给" }}</div>
                    </div>

                    <div v-show="tab3==='3'">
                        <div v-if="scope.row.type[2].label==='gap'">{{ "GAP" }}</div>
                    </div>
                    </div>
                </template>
                </el-table-column>
                <el-table-column label="汇总" min-width="180" align="center" type="cell">
                <template slot-scope="scope">
                    <div v-if="tab3==='0'">
                        <div class="borders">{{ scope.row.type[0].sum_value | rounding }}</div>
                        <div class="borders1">{{ scope.row.type[1].sum_value | rounding }}</div>
                        <div class="borders2">{{ scope.row.type[2].sum_value | rounding }}</div>
                    </div>
                    <div v-else>
                        <div v-show="tab3==='1'">
                            <div>{{ scope.row.type[0].sum_value | rounding }}</div>
                        </div>
                        <div v-show="tab3==='2'">
                            <div >{{ scope.row.type[1].sum_value | rounding }}</div>
                        </div>

                        <div v-show="tab3==='3'">
                            <div >{{ scope.row.type[2].sum_value | rounding }}</div>
                        </div>
                    </div>
                </template>
                </el-table-column>
                <el-table-column :prop="v" v-for="(v,i) in monthRange3"  :label="v+'月'" width="180" align="center" :key="i" type="cell">
                <template slot-scope="scope">
                    <div v-if="tab3==='0'">
                    <div class="borders">{{ scope.row.type[0].value[v] | rounding }}</div>
                    <div class="borders1" >{{ scope.row.type[1].value[v] | rounding }}</div>
                    <div class="borders2" >{{ scope.row.type[2].value[v] | rounding }}</div>
                    </div>

                    <div v-else>
                    <div v-show="tab3==='1'">
                        <div>{{ scope.row.type[0].value[v] | rounding }}</div>
                    </div>
                    <div v-show="tab3==='2'">
                    <div >{{ scope.row.type[1].value[v] | rounding }}</div>
                    </div>
                    <div v-show="tab3==='3'">
                        <div >{{ scope.row.type[2].sum_value | rounding }}</div>
                    </div>
                    </div>
                </template>
                </el-table-column>
            </el-table>
            <!-- <el-pagination
                class="marT"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-size="baseSize"
                layout="total, prev, pager, next, jumper"
                :total="total"
                style="margin-top:10px;margin-left:34%"
                >
            </el-pagination> -->
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="技术领域维度" name="fourth">
            技术领域维度
          </el-tab-pane>
           <el-tab-pane label="资源缺口维度" name="fifth">
            资源缺口维度
          </el-tab-pane>
           <el-tab-pane label="招聘计划" name="sixth">
            招聘计划
          </el-tab-pane>
        </el-tabs>
      
    </el-card>
    </div>
</template>

<script>
import { getHeaderName } from '@/app.config'
import VTitle from '@/views/sys/internetThings/title';
import { mapState, mapMutations } from 'vuex';
import http from '@/views/sys/axios';
import { Loading } from 'element-ui';
import { DateUtil } from './utils.js'

export default {
  name: 'GAPForms',
  components: {
    VTitle,
  },
  filters: {
    rounding (value) {
      if(value || value === 0) { //这个判断是为了防止数据为空，页面渲染为NAN
        return Number(value).toFixed(1)
      }
    }
  },
  data() {
    return {
      SsbmOptions:[],
      ssbm:'',
      tab3:'0',
      isShow:true,
      isShow1:true,
      isShow2:true,
      value3:'',
    //   tecAreaOptions3:[],
      tecArea3:'',
    //   cusDeptOptions3:[],
      cusDept3:'',
      recourse3:'',
      ProStatusOption3:[],
      proStatus3:'',
      Produnction3:'',
    //   props: { multiple: true },
      deptOptions3:[],
      dept3:'',
      paramsData3:{},
      current3:1,
      baseSize3:10,
      total3:0,
      monthRange3:[],
      tableData3:[],
      loading3:false,
      tabName:'first',
      tab:'0',
      tab1:'0',
      paramsData:{},
      paramsData1:{},
      current:1,
      current1:1,
      baseSize:10,
      baseSize1:10,
      total:0,
      total1:0,
      monthRange:[],
      monthRange1:[],
      value1:'',
      value2:'',
      tecAreaOptions:[],
      tecArea:'',
      tecArea1:'',
      cusDeptOptions:[],
      cusDept:'',
      cusDept1:'',
      recourseOptions:[    
        {
          value:"需求",
          label:"需求"
        },
        {
          value:"供给",
          label:"供给"
        },
        {
          value:"GAP",
          label:"GAP"
        }
      ],
      recourse:'',
      recourse1:'',
      ProStatusOption:[],
      proStatus:'',
      proStatus1:'',
      Produnction:'',
      Produnction1:'',
      ProdunctionOptions:[],
      props: { multiple: true },
      deptOptions:[],
      dept:'',
      dept1:'',
      activeName: 'first',
      loading: false,
      loading1: false,
      loading3: false,
      cusLoading: false,
      tableData: [],
      tableData1: [],
    };
  },
  created(){
  
  },
  mounted(){
   this.getTableData()
   this.getProdunctionOptions()
   this.getProStatusOption()
//    this.getProStatusOption3()
   this.getCusDept()
//    this.getCusDept3()
   this.getTecAreaOptions()
//    this.getTecAreaOptions3()
   this.getDeptOptions()
   this.getDeptOptions3()
   this.getTableData1()
   this.getTableData3()
   
  },
  watch:{
  },
  methods: {
    searchSsbm(v){
      this.paramsData3["demand_dept_ids"] = v
      this.current3 = 1
      this.getTableData3()
    },
      down1(){
        this.loading1 = true
        this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_kh_zh/data_to_excel',
        method: "get",
        headers: getHeaderName(),
        responseType: 'blob',
        }).then(res => {
        if(res.status === 200) {
            this.loading1 = false
            const blob = new Blob([res.data]);
            const fileName = '资源GAP报表-客户维度.xlsx';
            // for IE
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, fileName)
        } else {
            // for Non-IE (chrome, firefox etc.)
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
            this.loading1 = false
            this.$message({
            type:"success",
            message:"导出成功!"
            })
        }} else {
            this.loading1 = false
            this.$message.error('下载出错了!'); 
            }
            }).catch(err => {
                this.$message.error('下载出错了!'); 
                this.loading1 = false
            })
    },
    down(){
        this.loading = true
        this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_dept/data_to_excel',
        method: "get",
        headers: getHeaderName(),
        responseType: 'blob',
        }).then(res => {
        if(res.status === 200) {
            this.loading = false
            const blob = new Blob([res.data]);
            const fileName = '资源GAP报表-事业部维度.xlsx';
            // for IE
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, fileName)
        } else {
            // for Non-IE (chrome, firefox etc.)
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
            this.loading = false
            this.$message({
            type:"success",
            message:"导出成功!"
            })
        }} else {
            this.loading = false
            this.$message.error('下载出错了!'); 
            }
            }).catch(err => {
                this.$message.error('下载出错了!'); 
                this.loading = false
            })
    },
    getSummaries1(param) {
      const { columns, data } = param;
      const sums1 = [];
      //循环处理所有列数据
      columns.forEach((column, index) => {
        if (index === 0) {
          sums1[index] = '总计';
          return;
        }else if(index === 1){
          if(this.tab1==="0"){
            var cword1 = <div class="borders">{'总需求'}</div>
            var cword2 = <div class="borders1">{'总实际'}</div>
            var cword3 = <div class="borders2">{'总GAP'}</div>
            sums1[index] = [cword1,cword2,cword3];
          }if(this.tab1==="1"){
            var cword = <div>{'总需求'}</div>
            sums1[index] = [cword];
          }if(this.tab1==="2"){
            var cword = <div>{'总实际'}</div>
            sums1[index] = [cword];
          }if(this.tab1==="3"){
            var cword = <div>{'总GAP'}</div>
            sums1[index] = [cword];
          }
          
          return;
        }else if(index === 2){
          const sumNeed = data.map(item => {
            if(column.type == 'cell'){
              let spendNeed = item.type[0].sum_value.toFixed(1)
              return spendNeed
            }
          });
           const sumGet = data.map(item => {
            if(column.type == 'cell'){
              let spendGet = item.type[1].sum_value.toFixed(1)
              return spendGet
            }
          });
          const sumGap = data.map(item => {
            if(column.type == 'cell'){
              let spendGap = item.type[2].sum_value.toFixed(1)
              return spendGap
            }
          });
          if (!sumNeed.every(value => isNaN(value))) {
            var cnum1Need = sumNeed.reduce((prev, curr) => {
            const value = Number(curr);
              if (!isNaN(value)) {
                return (Number(prev) + Number(curr)).toFixed(1)
              } else {
                return Number(prev).toFixed(1)
              }
            }, 0);
            var cnum1Get = sumGet.reduce((prev, curr) => {
              const value = Number(curr);
                if (!isNaN(value)) {
                  return (Number(prev) + Number(curr)).toFixed(1)
                } else {
                  return Number(prev).toFixed(1)
                }
            }, 0);
            var cnum1Gap = sumGap.reduce((prev, curr) => {
            const value = Number(curr);
              if (!isNaN(value)) {
                return (Number(prev) + Number(curr)).toFixed(1)
              } else {
                return Number(prev)
              }
            }, 0);
            if(this.tab1==="0"){
              var chtml1Need1 = <div class="borders">{cnum1Need}</div>
              var chtml2Need1 = <div class="borders1">{cnum1Get}</div>
              var chtml3Need1 = <div class="borders2">{cnum1Gap}</div>
              sums1[index] = [chtml1Need1,chtml2Need1,chtml3Need1]
            }if(this.tab1==="1"){
              var cword33a = <div>{cnum1Need}</div>
              sums1[index] = [cword33a];
            }if(this.tab1==="2"){
              var cword33a = <div>{cnum1Get}</div>
              sums1[index] = [cword33a];
            }if(this.tab1==="3"){
              var cword33a = <div>{cnum1Gap}</div>
              sums1[index] = [cword33a];
            }
          }
        }else{
          // 将每列的所有数据数字化处理成一个数组
        const cvalues1 = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[0].value
            if(obj[column.property]){
              let spendTime1
              spendTime1 = obj[column.property].toFixed(1)
              // console.log(spendTime1)
              return spendTime1
            }
          } else {
             return NaN
          }
        });
       
        const cvalues2 = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[1].value
            if(obj[column.property]){
              let spendTime2 = 0
              spendTime2 = obj[column.property]
              return spendTime2
            } 
          } else {
             return NaN
          }
        });

        const cvaluesAdd = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[2].value
            if(obj[column.property]){
              let spendTimeAdd = obj[column.property]
              spendTimeAdd = spendTimeAdd.toFixed(1)
              // console.log(spendTimeAdd)
              return spendTimeAdd
            }
          } else {
             return NaN
          }
        });

        const cvalues3 = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[0].sum_value
            let spendTime3 = 0
            spendTime3 = obj
            return spendTime3
          } else {
            return NaN
          }
        });

        const cvalues4 = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[1].sum_value
            let spendTime4 = obj
            return spendTime4
          } else {
            return NaN
          }
        });
            
        const cvaluesAddsum = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[2].sum_value
            let spendTimeAddsum = obj
            return spendTimeAddsum
          } else {
            return NaN
          }
        });

        if (!cvalues1.every(value => isNaN(value))) {
          var cnum1 = cvalues1.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var cnum2 = cvalues2.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var cnumAdd = cvaluesAdd.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(1)
             
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var cnumAddsum = cvaluesAddsum.reduce((prev, curr) => {
            const val = Number(curr);
            if (!isNaN(val)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          if(this.tab1==="0"){
            var chtml1 = <div class="borders">{cnum1}</div>
            var chtml2 = <div class="borders1">{cnum2}</div>
            var chtml3 = <div class="borders2">{cnumAdd}</div>
            sums1[index] = [chtml1,chtml2,chtml3]
          }if(this.tab1==="1"){
            var cword33b = <div>{cnum1}</div>
            sums1[index] = [cword33b];
          }if(this.tab1==="2"){
             var cword33b = <div>{cnum2}</div>
            sums1[index] = [cword33b];
          }if(this.tab1==="3"){
             var cword33b = <div>{cnumAddsum}</div>
            sums1[index] = [cnumAdd];
          }
         
        }
        else{
          var cnum3 = cvalues3.reduce((prev, curr) => {
            const val = Number(curr);
            if (!isNaN(val)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var cnum4 = cvalues4.reduce((prev, curr) => {
            const val = Number(curr);
            if (!isNaN(val)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var cnumAddsum = cvaluesAddsum.reduce((prev, curr) => {
            const val = Number(curr);
            if (!isNaN(val)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          if(this.tab1==="0"){
            var html4 = <div class="borders">{cnum3}</div>
            var html5 = <div class="borders1">{cnum4}</div>
            var html6 = <div class="borders2">{cnumAddsum}</div>
            sums1[index] = [html4,html5,html6] 
          }if(this.tab1==="1"){
            var cword44 = <div>{cnum3}</div>
            sums1[index] = [cword44];
          }if(this.tab1==="2"){
             var cword44 = <div>{cnum4}</div>
            sums1[index] = [cword44];
          }if(this.tab1==="3"){
             var cword44 = <div>{cnumAddsum}</div>
            sums1[index] = [cword44];
          }
        }
        }
        
      });
      return sums1;
    },
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        //循环处理所有列数据
        columns.forEach((column, index) => {
            if (index === 0) {
            sums[index] = '总计';
            return;
            }else if(index === 1){
            if(this.tab==="0"){
                var word1 = <div class="borders">{'总需求'}</div>
                var word2 = <div class="borders1">{'总实际'}</div>
                var word3 = <div class="borders2">{'总GAP'}</div>
                sums[index] = [word1,word2,word3];
            }if(this.tab==="1"){
                var word11 = <div>{'总需求'}</div>
                sums[index] = [word11];
            }if(this.tab==="2"){
                var word11 = <div>{'总实际'}</div>
                sums[index] = [word11];
            }if(this.tab==="3"){
                var word11 = <div>{'总GAP'}</div>
                sums[index] = [word11];
            }
            return;
            }else if(index === 2){
          const sumNeed1 = data.map(item => {
            if(column.type == 'cell'){
              let spendNeed1 = item.type[0].sum_value.toFixed(1)
              return spendNeed1
            }
          });
           const sumGet1 = data.map(item => {
            if(column.type == 'cell'){
              let spendGet1 = item.type[1].sum_value.toFixed(1)
              return spendGet1
            }
          });
          const sumGap1 = data.map(item => {
            if(column.type == 'cell'){
              let spendGap1 = item.type[2].sum_value.toFixed(1)
              return spendGap1
            }
          });
          if (!sumNeed1.every(value => isNaN(value))) {
            var cnum1Need1 = sumNeed1.reduce((prev, curr) => {
            const value = Number(curr);
              if (!isNaN(value)) {
                return Number(prev) + Number(curr)
              } else {
                return Number(prev)
              }
            }, 0);
            var cnum1Get1 = sumGet1.reduce((prev, curr) => {
              const value = Number(curr);
                if (!isNaN(value)) {
                  return Number(prev) + Number(curr)
                } else {
                  return Number(prev)
                }
            }, 0);
            var cnum1Gap1 = sumGap1.reduce((prev, curr) => {
            const value = Number(curr);
              if (!isNaN(value)) {
                return Number(prev) + Number(curr)
              } else {
                return Number(prev)
              }
            }, 0);
            if(this.tab==="0"){
              var chtml1Need = <div class="borders">{cnum1Need1.toFixed(1)}</div>
              var chtml2Need = <div class="borders1">{cnum1Get1.toFixed(1)}</div>
              var chtml3Need = <div class="borders2">{cnum1Gap1.toFixed(1)}</div>
              sums[index] = [chtml1Need,chtml2Need,chtml3Need]
            }if(this.tab==="1"){
              var cword33Add = <div>{cnum1Need1.toFixed(1)}</div>
              sums[index] = [cword33Add];
            }if(this.tab==="2"){
              var cword33Add = <div>{cnum1Get1.toFixed(1)}</div>
              sums[index] = [cword33Add];
            }if(this.tab==="3"){
              var cword33Add = <div>{cnum1Gap1}</div>
              sums[index] = [cword33Add];
            }
          }
        }else{
          //将每列的所有数据数字化处理成一个数组
            const values1 = data.map(item => {
            if(column.type == 'cell') {
                let obj = item.type[0].value  // need
                if(index === 2){
                  obj = item.type[0].sum_value
                  }
                  if(obj[column.property]){
                    let spendTime1 = obj[column.property].toFixed(1)
                    return spendTime1
                  }
                  
                } else {
                  return NaN
              }
            });
            const values2 = data.map(item => {
            if(column.type == 'cell') {
                let obj = item.type[1].value //get
                if(obj[column.property]){
                  let spendTime2 = 0
                  spendTime2 = obj[column.property].toFixed(1)
                  return spendTime2
                }
            } else {
                return NaN
            }
            });

            const valuesAdd = data.map(item => {
            if(column.type == 'cell') {
                let obj = item.type[2].value //Gap
                if(obj[column.property]){
                  let spendTimeAdd = obj[column.property].toFixed(1)
                  return spendTimeAdd
                }
            } else {
                return NaN
            }
            });

            const values3 = data.map(item => {
                if(column.type == 'cell') {
                let obj = item.type[0].sum_value
                let spendTime3 = 0
                spendTime3 = obj
                return spendTime3
                } else {
                return NaN
                }
            });

            const values4 = data.map(item => {
              if(column.type == 'cell') {
                  let obj = item.type[1].sum_value
                  let spendTime4 = 0
                  spendTime4 = obj
                  return spendTime4
              } else {
                  return NaN
              }
            });

            const values4Addsum = data.map(item => {
              if(column.type == 'cell') {
                  let obj = item.type[2].sum_value
                  let spendTimeAddsum = obj
                  return spendTimeAddsum
              } else {
                  return NaN
              }
            });
            if (!values1.every(value => isNaN(value))) {
              var num1 = values1.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                  return (Number(prev) + Number(curr)).toFixed(1)
                  } else {
                  return Number(prev).toFixed(1)
                  }
              }, 0);
            var num2 = values2.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                return (Number(prev) + Number(curr)).toFixed(1)
                } else {
                return Number(prev).toFixed(1)
                }
              }, 0);
              var numAdd = valuesAdd.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                return (Number(prev) + Number(curr)).toFixed(1)
                } else {
                return Number(prev).toFixed(1)
                }
              }, 0);
              var numAddsum = values4Addsum.reduce((prev, curr) => {
                  const val = Number(curr);
                  if (!isNaN(val)) {
                  return (Number(prev) + Number(curr)).toFixed(1)
                  } else {
                  return Number(prev).toFixed(1)
                  }
              }, 0);
              if(this.tab==="0"){
                  var html1 = <div class="borders">{num1}</div>
                  var html2 = <div class="borders1">{num2}</div>
                  var html3 = <div class="borders2">{numAdd}</div>
                  sums[index] = [html1,html2,html3]
              }if(this.tab==="1"){
                  var word33 = <div>{num1}</div>
                  sums[index] = [word33];
              }if(this.tab==="2"){
                  var word33 = <div>{num2}</div>
                  sums[index] = [word33];
              }if(this.tab==="3"){
                  var word33 = <div>{numAdd}</div>
                  sums[index] = [word33];
              }
            
            }
            else{
              var num3 = values3.reduce((prev, curr) => {
                  const val = Number(curr);
                  if (!isNaN(val)) {
                  return (Number(prev) + Number(curr)).toFixed(1)
                  } else {
                  return Number(prev).toFixed(1)
                  }
              }, 0);
              var num4 = values4.reduce((prev, curr) => {
                  const val = Number(curr);
                  if (!isNaN(val)) {
                  return (Number(prev) + Number(curr)).toFixed(1)
                  } else {
                  return Number(prev).toFixed(1)
                  }
              }, 0);
              var numAddsum = values4Addsum.reduce((prev, curr) => {
                  const val = Number(curr);
                  if (!isNaN(val)) {
                  return (Number(prev) + Number(curr)).toFixed(1)
                  } else {
                  return Number(prev).toFixed(1)
                  }
              }, 0);
              if(this.tab==="0"){
                  var html4 = <div class="borders">{num3}</div>
                  var html5 = <div class="borders1">{num4}</div>
                  var html6 = <div class="borders2">{numAddsum}</div>
                  sums[index] = [html4,html5,html6] 
              }if(this.tab==="1"){
                  var word44 = <div>{num3}</div>
                  sums[index] = [word44];
              }if(this.tab==="2"){
                  var word44 = <div>{num4}</div>
                  sums[index] = [word44];
              }if(this.tab==="3"){
                  var word44 = <div>{numAddsum.toFixed(1)}</div>
                  sums[index] = [word44];
              }
            }
        }
            
        });
        return sums;
    },
    down3(){
       this.loading3 = true
        this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/data_to_excel',
          method: "get",
          headers: getHeaderName(),
          responseType: 'blob',
        }).then(res => {
          if(res.status === 200) {
            this.loading3 = false
            const blob = new Blob([res.data]);
            const fileName = '资源报表.xlsx';
            // for IE
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(blob, fileName)
          } else {
              // for Non-IE (chrome, firefox etc.)
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href);
              document.body.removeChild(elink);
              this.loading3 = false
              this.$message({
              type:"success",
              message:"导出成功!"
            })
          }
          } else {
            this.loading3 = false
            this.$message.error('下载出错了!'); 
          }
        }).catch(err => {
            this.$message.error('下载出错了!'); 
            this.loading3 = false
        })
    },
    getSummaries3(param) {
      const { columns, data } = param;
      const sums = [];
      //循环处理所有列数据
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }else if(index === 6){
          if(this.tab3==="0"){
            var word111 = <div class="borders">{'总需求'}</div>
            var word222 = <div class="borders1">{'总实际'}</div>
            var word333 = <div class="borders2">{'总GAP'}</div>
            sums[index] = [word111,word222,word333];
          }if(this.tab3==="1"){
            var word1111 = <div>{'总需求'}</div>
            sums[index] = [word1111];
          }if(this.tab3==="2"){
            var word1111 = <div>{'总实际'}</div>
            sums[index] = [word1111];
          }if(this.tab3==="3"){
            var word1111 = <div>{'总GAP'}</div>
            sums[index] = [word1111];
          }
          
          return;
        }else if(index === 5){
          const sumNeed3 = data.map(item => {
            if(column.type == 'cell'){
              let spendNeed3 = item.type[0].sum_value.toFixed(1)
              return spendNeed3
            }
          });
           const sumGet3 = data.map(item => {
            if(column.type == 'cell'){
              let spendGet3 = item.type[1].sum_value.toFixed(1)
              return spendGet3
            }
          });
          const sumGap3 = data.map(item => {
            if(column.type == 'cell'){
              let spendGap3 = item.type[2].sum_value.toFixed(1)
              return spendGap3
            }
          });
          if (!sumNeed3.every(value => isNaN(value))) {
            var cnum1Need3 = sumNeed3.reduce((prev, curr) => {
            const value = Number(curr);
              if (!isNaN(value)) {
                return Number(prev) + Number(curr)
              } else {
                return Number(prev)
              }
            }, 0);
            var cnum1Get3 = sumGet3.reduce((prev, curr) => {
              const value = Number(curr);
                if (!isNaN(value)) {
                  return Number(prev) + Number(curr)
                } else {
                  return Number(prev)
                }
            }, 0);
            var cnum1Gap3 = sumGap3.reduce((prev, curr) => {
            const value = Number(curr);
              if (!isNaN(value)) {
                return Number(prev) + Number(curr)
              } else {
                return Number(prev)
              }
            }, 0);
            if(this.tab3==="0"){
              var chtml1Need3 = <div class="borders">{cnum1Need3.toFixed(1)}</div>
              var chtml2Need3 = <div class="borders1">{cnum1Get3.toFixed(1)}</div>
              var chtml3Need3 = <div class="borders2">{cnum1Gap3.toFixed(1)}</div>
              sums[index] = [chtml1Need3,chtml2Need3,chtml3Need3]
            }if(this.tab3==="1"){
              var cword33 = <div>{cnum1Need3.toFixed(1)}</div>
              sums[index] = [cword33];
            }if(this.tab3==="2"){
              var cword33 = <div>{cnum1Get3.toFixed(1)}</div>
              sums[index] = [cword33];
            }if(this.tab3==="3"){
              var cword33 = <div>{cnum1Gap3.toFixed(1)}</div>
              sums[index] = [cword33];
            }
          }
        }else if(index >5){
          //将每列的所有数据数字化处理成一个数组
        const values111 = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[0].value
            if(index === 2){
              obj = item.type[0].sum_value
            }
             let spendTime1
             spendTime1 = obj[column.property]
             return spendTime1
          } else {
             return NaN
          }
        });
       
        const values222= data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[1].value
            let spendTime2 = 0
            spendTime2 = obj[column.property]
             return spendTime2
          } else {
             return NaN
          }
        });
        const values222Gap= data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[2].value
            if(obj[column.property]){
              let spendTime2Gap = obj[column.property].toFixed(1)
              return spendTime2Gap
            }
          } else {
             return NaN
          }
        });

        const values333 = data.map(item => {
            if(column.type == 'cell') {
              let obj = item.type[0].sum_value
              let spendTime3 = 0
              spendTime3 = obj
              return spendTime3
            } else {
              return NaN
            }
          });

        const values444 = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[1].sum_value
            let spendTime4 = 0
            spendTime4 = obj
            return spendTime4
          } else {
            return NaN
          }
        });

        const values444Gap = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[2].sum_value
            let  spendTime4Gap = obj
            return spendTime4Gap
          } else {
            return NaN
          }
        });
        if (!values111.every(value => isNaN(value))) {
          var num111 = values111.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var num222 = values222.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var num222Gap = values222Gap.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          if(this.tab3==="0"){
            var html111 = <div class="borders">{num111}</div>
            var html222 = <div class="borders1">{num222}</div>
            var html333 = <div class="borders2">{num222Gap}</div>
            sums[index] = [html111,html222,html333]
          }if(this.tab3==="1"){
            var word3333 = <div>{num111}</div>
            sums[index] = [word3333];
          }if(this.tab3==="2"){
             var word3333 = <div>{num222}</div>
            sums[index] = [word3333];
          }if(this.tab3==="3"){
             var word3333 = <div>{num222Gap}</div>
            sums[index] = [word3333];
          }
         
        }
        else{
          var num333 = values333.reduce((prev, curr) => {
            const val = Number(curr);
            if (!isNaN(val)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var num444 = values444.reduce((prev, curr) => {
            const val = Number(curr);
            if (!isNaN(val)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var num444Gap = values444Gap.reduce((prev, curr) => {
            const val = Number(curr);
            if (!isNaN(val)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          if(this.tab==="0"){
            var html444 = <div class="borders">{num333}</div>
            var html555 = <div class="borders1">{num444}</div>
            var html666 = <div class="borders2">{num444Gap}</div>
            sums[index] = [html444,html555,html666] 
          }if(this.tab==="1"){
            var word444 = <div>{num333}</div>
            sums[index] = [word444];
          }if(this.tab==="2"){
             var word444 = <div>{num444}</div>
            sums[index] = [word444];
          }if(this.tab==="3"){
             var word444 = <div>{num444Gap}</div>
            sums[index] = [word444];
          }
        }
        }
        
      });
      return sums;
    },
    changeDateRange3(e){
      let arr = []
      let arr1 = []
      let startData = e[0]
      let endData = e[1]
      var YY11 = startData.getFullYear() 
      var MM11 = (startData.getMonth() + 1 < 10 ? '0' + (startData.getMonth() + 1) : startData.getMonth() + 1) ;
      arr.push(YY11 , MM11)
      arr = arr.map(v=>{
        if (v[0] == "0") {
          return (v = v.slice(1));
        } else {
          return v;
        }
      })
      let startTime = arr.join("-")

      var YY22 = endData.getFullYear() 
      var MM22 = (endData.getMonth() + 1 < 10 ? '0' + (endData.getMonth() + 1) : endData.getMonth() + 1) ;
      arr1.push(YY22 , MM22)
      arr1 = arr1.map(v=>{
        if (v[0] == "0") {
          return (v = v.slice(1));
        } else {
          return v;
        }
      })
      let endTime = arr1.join("-")
      this.paramsData3['start_date'] = startTime
      this.paramsData3['end_date'] = endTime
      this.current3 = 1
      this.getTableData3()
    },
    tecAreaSearch3(val){
      let tempArr = []
      let tempArr1 = this.$refs.tree2.getCheckedNodes()
      tempArr1.map(val => {
        tempArr.push(val.value)
      })
      val.map(item => {
        tempArr.push(item[item.length-1])
      })
      tempArr=Array.from(new Set(tempArr))
      this.paramsData3['technical_field_ids'] = tempArr
      this.current3 = 1
      this.getTableData3()
    },
    // getTecAreaOptions3() {
    //   this.$axios({
    //     url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree',
    //     method: "get",
    //     headers: getHeaderName(),
    //   }).then(res => {
    //     this.tecAreaOptions3 = res.data.data
    //   })
    // },
    cusDeptSearch3(val){
      this.paramsData3["kh_zh"] = val
      this.current3 = 1
      this.getTableData3()
    },
    // getCusDept3(){
    //   this.$axios({
    //       url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/kh_zh_tree_list',
    //       method: "get",
    //       headers: getHeaderName(),
    //     }).then(res => {
    //       if(res.data.code === 200) {
    //         this.cusDeptOptions3 = res.data.data
    //       }
    //     })
    // },
    recourseSearch3(e){
        if(e==="需求"){
          this.tab3 = '1'
        }
        if(e==="供给"){
          this.tab3 = '2'
        }
        if(e==="GAP"){
          this.tab3 = '3'
        }
        if(e===''){
            this.tab3 = '0'
        }
    },
    proStatusSearch3(val){
      this.paramsData3["status"] = val
      this.current3 = 1
      this.getTableData3()
    },
    // getProStatusOption3(){
    //    this.$axios({
    //       url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/status_tree_list',
    //       method: "get",
    //       headers: getHeaderName(),
    //     }).then((res) => {
    //       if(res.data.code === 200) {
    //         this.ProStatusOption3 = res.data.data
    //       }
    //     })
    // },
    tecSearch3(){},
    getTecOptions3(){ },
    getDeptOptions3(){
      this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/tree_list',
          method: "get",
          headers: getHeaderName(),
        }).then((res) => {
          if(res.data.code === 200) {
            this.deptOptions3 = res.data.data
          }
        })
    },
    deptSearch3(val){
      let praProId = []
      val.map(v => {
        praProId.push(v[1])
      })
      this.paramsData3["project_ids"] = praProId
      this.current3 = 1
      this.getTableData3()
    },
    handleCurrentChange3(val) {
      this.current3 = val;
      this.getTableData3()
    },
    handleSizeChange3(val){
    },
    getTableData3(){
       this.loading3 = true
       this.paramsData3["page"] = this.current
       this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/data',
          method: "post",
          headers: getHeaderName(),
          data:this.paramsData3
        }).then((res => {
          if(res.data.code === 200){
            this.loading3 = false
            this.tableData3 = res.data.data.data
            this.monthRange3 = res.data.data.month_range
            this.SsbmOptions = res.data.data.demand_depts
            this.total3 = res.data.data.totalCount
          }else{
            this.loading3 = false
            this.$message.error('请求出错')
          }
        }))
    },
    getProdunctionOptions(){
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_core',
        method: "get",
        headers: getHeaderName(),
        }).then(res => {
          this.ProdunctionOptions = res.data.data
        })
    },
    changeDateRange(e){
        if(this.tabName==="first"){
            let arr = []
            let arr1 = []
            let startData = e[0]
            let endData = e[1]
            var YY1 = startData.getFullYear() 
            var MM1 = (startData.getMonth() + 1 < 10 ? '0' + (startData.getMonth() + 1) : startData.getMonth() + 1) ;
            arr.push(YY1 , MM1)
            arr = arr.map(v=>{
                if (v[0] == "0") {
                return (v = v.slice(1));
                } else {
                return v;
                }
            })
            let startTime = arr.join("-")

            var YY2 = endData.getFullYear() 
            var MM2 = (endData.getMonth() + 1 < 10 ? '0' + (endData.getMonth() + 1) : endData.getMonth() + 1) ;
            arr1.push(YY2 , MM2)
            arr1 = arr1.map(v=>{
                if (v[0] == "0") {
                return (v = v.slice(1));
                } else {
                return v;
                }
            })

            let endTime = arr1.join("-")
            this.paramsData['start_date'] = startTime
            this.paramsData['end_date'] = endTime
            this.current = 1
            this.getTableData()
        }else if(this.tabName==="second"){
            let arr2 = []
            let arr3 = []
            let startData = e[0]
            let endData = e[1]
            var YY3 = startData.getFullYear() 
            var MM3 = (startData.getMonth() + 1 < 10 ? '0' + (startData.getMonth() + 1) : startData.getMonth() + 1) ;
            arr2.push(YY3 , MM3)
            arr2 = arr2.map(v=>{
                if (v[0] == "0") {
                return (v = v.slice(1));
                } else {
                return v;
                }
            })
            let startTime1 = arr2.join("-")

            var YY4 = endData.getFullYear() 
            var MM4 = (endData.getMonth() + 1 < 10 ? '0' + (endData.getMonth() + 1) : endData.getMonth() + 1) ;
            arr3.push(YY4 , MM4)
            arr3 = arr3.map(v=>{
                if (v[0] == "0") {
                return (v = v.slice(1));
                } else {
                return v;
                }
            })
            let endTime1 = arr3.join("-")
            this.paramsData1['start_date'] = startTime1
            this.paramsData1['end_date'] = endTime1
            this.current1 = 1
            this.getTableData1()
        }
        
    },
    tecAreaSearch(val){
        if(this.tabName==="first"){
            let tempArr = []
            let tempArr1 = this.$refs.tree.getCheckedNodes()
            tempArr1.map(val => {
                tempArr.push(val.value)
            })
            val.map(item => {
                tempArr.push(item[item.length-1])
            })
            tempArr=Array.from(new Set(tempArr))
            this.paramsData['technical_field_ids'] = tempArr
            this.current = 1
            this.getTableData()
        }else if(this.tabName==="second"){
            let tempArr2 = []
            let tempArr3 = this.$refs.tree1.getCheckedNodes()
            tempArr3.map(val => {
                tempArr2.push(val.value)
            })
            val.map(item => {
                tempArr2.push(item[item.length-1])
            })
            tempArr2=Array.from(new Set(tempArr2))
            this.paramsData1['technical_field_ids'] = tempArr2
            this.current1 = 1
            this.getTableData1()
        }
        
    },
    getTecAreaOptions() {
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree',
            method: "get",
            headers: getHeaderName(),
        }).then(res => {
            this.tecAreaOptions = res.data.data
        })
    },
    cusDeptSearch(val){
        if(this.tabName==="first"){
            this.paramsData["kh_zh"] = val
            this.current = 1
            this.getTableData()
        }else if(this.tabName==="second"){
            this.paramsData1["kh_zh"] = val 
            this.current1 = 1
            this.getTableData1()
        }
    },
    getCusDept(){
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/kh_zh_tree_list',
            method: "get",
            headers: getHeaderName(),
            }).then(res => {
            if(res.data.code === 200) {
                this.cusDeptOptions = res.data.data
            }
        })
    },
    recourseSearch(e){
        if(this.tabName==="first"){
            if(e==="需求"){
            this.tab = '1'
            }
            if(e==="供给"){
            this.tab = '2'
            }
            if(e==="GAP"){
            this.tab = '3'
            }
            if(!e){
            this.tab = '0'
            }
            
        }else if(this.tabName==="second"){
            if(e==="需求"){
            this.tab1 = '1'
            }
            if(e==="供给"){
            this.tab1 = '2'
            }
            if(e==="GAP"){
            this.tab1 = '3'
            }
            if(!e){
            this.tab1 = '0'
            }
        }
    },
    proStatusSearch(val){
        if(this.tabName==="first"){
            this.paramsData["status"] = val
            this.current = 1
            this.getTableData()
        }else if(this.tabName==="second"){
            this.paramsData1["status"] = val
            this.current1 = 1
            this.getTableData1()
        }
    },
    getProStatusOption(){
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/status_tree_list',
            method: "get",
            headers: getHeaderName(),
            }).then((res) => {
            if(res.data.code === 200) {
                this.ProStatusOption = res.data.data
            }
        })
    },
    tecSearch1(){},
    tecSearch(val){
        if(this.tabName==="first"){
            this.paramsData["cores"] = val
            this.current = 1
            this.getTableData()
        }else if(this.tabName==="second"){
            this.paramsData1["cores"] = val
            this.current1 = 1
            this.getTableData1()
        }else if(this.tabName==="third"){
          console.log(val)
            this.paramsData3["cores"] = val
            this.current1 = 1
            this.getTableData3()
        }
    },
    getTecOptions(){ },
    getDeptOptions(){
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_dept/get_car_dept_tree',
            method: "get",
            headers: getHeaderName(),
            }).then((res) => {
            if(res.data.code === 200) {
                this.deptOptions = res.data.data
            }
            })
    },
    deptSearch(val){
        if(this.tabName==="first"){
            this.paramsData["dept_names"] = val
            this.current = 1
            this.getTableData()
        }else if(this.tabName==="second"){
            this.paramsData1["dept_names"] = val
            this.current1 = 1
            this.getTableData1()
        }
        
    },
    handleCurrentChange1(val) {
    // this.current = val;
    // this.getTableData()
    },
    handleSizeChange1(val){
    },
    handleCurrentChange(val) {
    // this.current = val;
    // this.getTableData()
    },
    handleSizeChange(val){
    },
    getTableData(){
       this.loading = true
       this.paramsData["page"] = this.current
       this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_dept/data',
          method: "post",
          headers: getHeaderName(),
          data:this.paramsData
        }).then((res => {
          if(res.data.code === 200){
            this.loading = false
            this.tableData = res.data.data.data
            this.monthRange = res.data.data.month_range
            this.total = res.data.data.totalCount
          }else{
            this.loading = false
            this.$message.error('请求出错')
          }
        }))
    },
    getTableData1(){
       this.loading1 = true
       this.paramsData1["page"] = this.current
       this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_kh_zh/data',
          method: "post",
          headers: getHeaderName(),
          data:this.paramsData1
        }).then((res => {
          if(res.data.code === 200){
            this.loading1 = false
            this.tableData1 = res.data.data.data
            this.monthRange1 = res.data.data.month_range
            this.total1 = res.data.data.totalCount
          }else{
            this.loading1 = false
            this.$message.error('请求出错')
          }
        }))
    },
    handleClick(tab, event) {
      this.tabName = tab.name
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-table__body-wrapper{
    z-index: 2
}
#GAPForms{
//   .tabWidth{
//       width:500px
//   }
  label {
    color:  #2b2f32;
    font-weight: bold;
  };
  .form-control {
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    font-size: 0.9rem;
    box-shadow: none;
    margin-bottom: 10px
  };
  .borders{
    border-bottom: 1px solid #c5c4c1;
    height: 25px;
    width: 120%;
    margin-left: -14px;
    margin-top:10px;
    // margin-bottom:10px;
  };
  .borders1{
    border-bottom: 1px solid #c5c4c1;
    height: 32px;
    width: 120%;
    margin-left: -14px;
    margin-top:10px;
    // margin-bottom:10px;
  };
  .borders2{
    // border-bottom: 1px solid #c5c4c1;
    height: 25px;
    width: 120%;
    margin-left: -14px;
    margin-top:10px;
    // margin-bottom:10px;
  };
}
</style>